<template>
  <!-- App -->
  <f7-app :params="f7params">

    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Left Panel -->
    <f7-panel left reveal theme-dark>
      <f7-view url="/menu/"></f7-view>
    </f7-panel>

    <!-- Main View -->
    <f7-view id="main-view" url="/" main></f7-view>

    <!-- Login Screen -->
    <f7-login-screen id="login-screen" :opened="!this.$store.state.global.isLogin">
      <f7-view name="login">
        <f7-page login-screen>
          <f7-login-screen-title>{{$t("common.appName")}}<span class="trademark">®</span></f7-login-screen-title>
          <f7-list form inline-labels no-hairlines-md>
            <f7-list-item >
                <f7-icon slot="media" f7="person" color="white"></f7-icon>

              <f7-input  name="account" :placeholder="$t('app.account')" type="text" @input="account = $event.target.value"></f7-input>
            </f7-list-item>
            <f7-list-item>
                <f7-icon slot="media" f7="lock" color="white"></f7-icon>
              <f7-input name="password" type="password" :placeholder="$t('app.password')" @input="password = $event.target.value"></f7-input>
            </f7-list-item>
            <f7-list-item>
              <f7-label style="color:#fff">{{$t("settings.language")}}</f7-label>
              <f7-input  type="select" v-on:change="switchLanguage($event.target.value)">
                <option value="zh_CN"  :selected="this.$store.state.global.lang=='zh_CN'">中文</option>
        				<option value="en"  :selected="this.$store.state.global.lang=='en'">English</option>
              </f7-input>
            </f7-list-item>
          </f7-list>
          <f7-block inner>
            <p><f7-button color="white" outline  @click="login">{{$t("app.login")}}</f7-button></p>
            <f7-row>
              <f7-col><f7-link color="white" href="/register/">{{$t("app.register")}}</f7-link></f7-col>

             <f7-col><f7-link color="white" style="float: right;">{{$t("app.forgetPassword")}}</f7-link></f7-col>
           </f7-row>
           <!-- <f7-row>
             <f7-col width="100" class="footer-copyright">Copyright©2019 LBSSoft All rights reserved. </f7-col>
           </f7-row> -->

          </f7-block>
        </f7-page>
      </f7-view>

    </f7-login-screen>

  </f7-app>
</template>

<script>
// Import Routes

import routes from './router/routes'
import { userLogin } from './api/api';

export default {
  data() {
    return {
      account:'',
      password:'',
      // Framework7 parameters here
      f7params: {
        id: 'com.lbssoft.gpsbd.client', // App bundle ID
        name: 'GPSBD', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: routes,
      },
      currentUrl:''//当前路由url
    }
  },
  methods:{
    login(){
      let para = {
        account:this.account,
        password:this.password,
        type:0
      }
      userLogin(para).then(data => {
            localStorage.user = JSON.stringify(data);
            this.$store.dispatch('initData',this); //初始化数据
            if(device.platform){
              if(data.id){
                window.JPush.setAlias({sequence: data.id,alias: data.id.toString() },
                 (result) => {
                     var alias = result.alias
                     //alert('别名设置成功')
                 }, (error) => {
                   //alert('别名设置失败')
                 })
              }

            }
            this.$f7.router.navigate('/')
      });
    },
    switchLanguage(val){
      localStorage.lang = val;
      this.$i18n.locale = val;
      this.$store.dispatch('initGlobalPropertys',[{key:'lang',value:val}])
    },

    onDeviceReady(){
      var _this = this;
      document.addEventListener("backbutton", _this.eventBackButton, true); //返回键


      document.addEventListener('deviceready', () => {
          let chcp = window.chcp;
          // 检测更新
          chcp.fetchUpdate((error, data) => {
            // 表示没有更新版本，或者其他错误，详情的信息参考上面的chcp error链接
            if (error) {
               if(error.code==-17){
                 _this.$f7.toast.create({
                    text: '正在更新新的版本，请稍后重启体验！',
                    closeTimeout: 2000,
                  }).open();
               }
            }

          });


          //注册极光推送
          document.addEventListener("jpush.receiveRegistrationId", function (event) {
                //alert("receiveRegistrationId" + JSON.stringify(event));
            }, false)
          _this.initiateUI();

      });

        document.addEventListener("jpush.openNotification", _this.onOpenNotification, false)

    },
    eventBackButton(){
      var _this = this;
      if(this.$f7.views.main.router.url=='/'){
            this.$f7.toast.create({
               text:_this.$t('app.clickAgainExit'),
               closeTimeout: 2000,
             }).open();
            document.removeEventListener("backbutton", _this.eventBackButton, false); //注销返回键
              //2秒后重新注册
              var intervalID = window.setInterval(
                  function() {
                     window.clearInterval(intervalID);
                     document.addEventListener("backbutton", _this.eventBackButton, false); //返回键
                  },2000);
      }else{
          this.$f7.views.main.router.back();
      }
    },
    //初始化极光推送
    initiateUI(){
         try {
             window.JPush.init();
             window.JPush.setDebugMode(false);
             if (device.platform != "Android") {
                 window.JPush.setApplicationIconBadgeNumber(0);
             }
         } catch (exception) {
            //alert('exception');
             console.log(exception);
         }
    },
    onOpenNotification(){
      try {
             var alertContent;
             if (device.platform == "Android") {
               alertContent = event.alert;
             } else {
               alertContent = event.aps.alert;
             }
            // alert("open Notification:" + alertContent);
             //this.$f7.router.navigate('/events/')
           } catch (exception) {
             console.log("JPushPlugin:onOpenNotification" + exception);
           }
    }
  },
  created(){

  },
   mounted() {
     window.f7 = this.$f7;
     if(localStorage.user){
        this.$store.dispatch('initData'); //初始化数据
     }
     this.$f7ready((f7) => {
        this.onDeviceReady();
      });

   }
}
</script>
<style>
  .login-screen-content{
        background: linear-gradient(to left bottom, #2196f3 30%,#67C23A 100%);
        padding-top: 80px;
  }
  .login-screen-title{
    color:#ffffff;
  }
  .trademark{
    font-size: 12px;
    vertical-align:text-top;
  }
  .footer-copyright{
    font-size: 12px;
    position: fixed;
    bottom: 0;
    text-align: center;
    color:#fff
  }
</style>
